<template>
  <div class="form">
    <el-form :model="form"
             :rules="rules"
             ref="form">
      <el-form-item prop="phone">
        <el-input prefix-icon="el-icon-user"
                  placeholder="请输入手机号"
                  v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="请输入密码"
                  v-model="form.password"
                  prefix-icon="el-icon-lock"
                  show-password></el-input>
      </el-form-item>
      <el-form-item prop="code"
                    class="code-item">
        <el-input placeholder="请输入验证码"
                  v-model="form.code"
                  prefix-icon="el-icon-key"
                  class="codeInput"></el-input><img src="@/assets/img/code.jpg"
             @click="img()"
             ref="pic"
             alt=""
             class="code" />
      </el-form-item>
      <el-form-item prop="type">
        <!-- 复选框选中验证 v-model中字段与name值相同 -->
        <el-checkbox v-model="form.type"
                     label="isAgree"
                     name="type">我已阅读并同意<a class="link">用户协议</a>和<a class="link">隐私条款</a></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="submit"
                   :loading='loading'>登录</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click.stop.prevent="register">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { isRightPhone } from '@/utils/validate.js'
import request from '@/utils/request.js'
export default {
  data () {
    return {
      loading: false,
      form: {
        type: '',
        phone: '18511111111', // 是string手机号
        password: '12345678', // 是string密码
        code: '' // 是string验证码
      },
      rules: {
        phone: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              isRightPhone(value, callback)
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 6, max: 10, message: '请输入6-10位密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '必填', trigger: 'blur' },
          { min: 4, max: 4, message: '请输入正确验证码', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请勾选协议', trigger: 'change' }]
      }
    }
  },
  mounted () {
    this.img()
  },
  methods: {
    register () {
      console.log(request.url);
      this.$bus.$emit('isShow', true, process.env.VUE_APP_BASE_API + '/captcha?type=sendsms')
    },
    img () {
      // this.$refs.pic. = '@/assets/images/person.png'
      this.$nextTick(() => {
        document.querySelector('.code').src = process.env.VUE_APP_BASE_API + '/captcha?type=login'
      });

    },
    submit () {
      this.$refs.form.validate(async (result) => {
        if (result) {
          //验证成功,开启loading
          this.loading = true
          try {
            // await login(this.form)
            // // 弹出登录成功弹框
            //  this.$message.success('登陆成功')
            await this.$store.dispatch('user/updateToken', this.form)
            //跳转之前关闭loading
            this.loading = false
            // 跳转到首页
            const secede = this.$route.query.secede || '/'
            this.$router.push(secede)
          } catch {
            this.loading = false
          }
        } else {
          this.$message.error('请正确填写登陆信息')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  .el-input {
    height: 45px;
  }
  .code-item {
    /deep/.el-form-item__content {
      display: flex;
    }
    .code {
      width: 110px;
      height: 42px;
      vertical-align: middle;
    }
    .codeInput {
      flex: 1;
    }
  }
  .link {
    color: #1493fa;
  }
  .el-button {
    width: 100%;
  }
}
</style>
